<template>
  <div class="playlist-container">
    <!-- 表头 -->
    <div class="list-header">
      <div v-for="(header, idx) in headers" :key="idx" class="fix-width">
        {{ header.title }}
      </div>
    </div>

    <!-- 内容 -->

    <el-scrollbar class="list-item">
      <div class="infinite-list" style="overflow: auto">
        <el-tooltip
          ref="tooltipRef"
          :visible="visible"
          :show-arrow="false"
          class="showActionBtn"
          :popper-options="{
            modifiers: [
              {
                name: 'computeStyles',
                options: {
                  adaptive: false,
                  enabled: false,
                },
              },
            ],
          }"
          :virtual-ref="buttonRef"
          virtual-triggering
          popper-class="singleton-tooltip"
          placement="right"
          append-to="body"
          effect="lightgray"
        >
          <template #content>
            <div class="more-box">
              <li @click="handleTakeMic">抱TA上麦</li>
              <li @click="handleReject">拒绝申请</li>
            </div>
          </template>
        </el-tooltip>
        <div v-for="(row, index) in rows" :key="index" class="infinite-list-item item-content">
          <span v-for="(header, idx) in headers" :key="idx">
            <!-- 操作列 -->
            <div v-if="header.actionType" class="fix-width">
              <div
                v-if="header.actionType === 'expand'"
                class="edit-btn"
                @click="
                  (e) => {
                    buttonRef = e.currentTarget;
                    visible = !visible;
                  }
                "
              >
                <el-icon>
                  <MoreFilled color="#fff" />
                </el-icon>
              </div>
              <div v-else class="edit-btn" @click="header.event">{{ header.actionType }}</div>
            </div>
            <!-- 用户列显示头像 -->
            <div
              v-if="header.key == 'user'"
              style="display: flex; align-items: center"
              class="fix-width"
            >
              <img :src="headerImg" style="width: 16px" class="m-r-1" />
              <span>{{ row.user }}</span>
            </div>
            <!-- 普通列直接显示数据 -->
            <div v-else :class="{ 'fix-width': true, 'text-overflow': header.key === 'title' }">
              {{ row[header.key] }}
            </div>
          </span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import headerImg from "@/assets/register/default_avator.png";
import { ref } from "vue";

const buttonRef = ref();
const tooltipRef = ref();

const visible = ref(false);

defineProps<{
  headers: Array<{
    title: string;
    key: string;
    actionType: string;
    event: any;
  }>;
  rows: Array<Record<string, any>>;
}>();

const handleTakeMic = () => {
  console.log("上麦操作");
};

const handleReject = () => {
  console.log("拒绝申请");
};
</script>

<style lang="scss" scoped>
/* 整体容器样式 */
.playlist-container {
  padding: 15px 20px;
  color: #ffffff;
  list-style: none;
}

/* 列表头部样式 */
.list-header {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 4px;
  padding-right: 20px;
}

/* 列表项样式 */
.list-item {
  height: 150px;
  padding-right: 20px;
}

.item-content {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  // background-color: olive;

  .edit-btn {
    font-size: 12px;
    color: #ff4e6c;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px 4px 4px 4px;
    padding: 3px 10px;
    min-width: 20px;
    cursor: pointer;
  }
  .edit-btn:hover {
    background: rgba(255, 255, 255, 0.5);
  }
  .text-overflow {
    //文本溢出
    width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
  }
}

/* 文本样式 */
.song-index {
  display: flex;
  justify-content: center;
  font-size: 14px;
  width: 15%;
  color: #ffffff;
  list-style-type: none;
  padding-left: 8px;
}

.song-title {
  width: 65%;
  font-size: 14px;
  display: flex;
  color: #ffffff;
  justify-content: center;
}
.fix-width {
  min-width: 50px;
  text-align: center;
  cursor: default;
}
.more-box {
  padding: 11px 14px;
  color: #fff;
  li {
    cursor: pointer;
    font-size: 14px;
    padding: 8px 0;
  }
}
</style>
